<template>
  <view class="containt">
    <!-- <view class="hottitle">热门品牌</view>
    <view class="flex paiflexbox">
      <view class="paibox" v-for="item in 6" ::key="item">
        <image
          class="photoimg"
          mode="widthFix"
          src="@/static/img/pailogo1.png"
        ></image>
        <view>劳力士</view>
      </view>
    </view> -->
    <view class="listbox">
        <uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
    </view>
  </view>
</template>

<script lang="ts" setup>
	import { fetchBrandList } from '@/api/brand'
	import { ref,getCurrentInstance, onMounted  } from "vue"
	const list = ref([])
	const { proxy } = getCurrentInstance()

  const bindClick=(e)=> {
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.emit('acceptDataFromOpenedPage', {data: JSON.stringify(e)})
		uni.navigateBack()
	}

	const getBrandList = async () => {
		try {
			const { data, code, msg } = await fetchBrandList()
			if (code === '1') {
				list.value = data || []
			} else {
				uni.showToast({
					icon: "none",
					title: msg,
				})
			}
		} catch(err) {
			console.error(err)
		}
	}

	onMounted(() => {
		getBrandList()
	})
</script>

<style lang="scss" scoped>
	.containt {
		background: #ffffff;
		margin-top: 16rpx;
		padding: 18rpx 22rpx;
	}
	.hottitle {
		font-size: 27rpx;
		font-weight: 500;
		color: #000000;
		line-height: 38rpx;
	}
	.paiflexbox {
		flex-wrap: wrap;
	}
	.photoimg {
		width: 118rpx;
		height: 100rpx;
	}
	.paibox {
		padding: 30rpx;
		text-align: center;
		&:nth-child(4n) {
			padding-right: 0;
		}
	}
	.listbox{
		position: relative;
		height: 100vh;
	}
</style>
